<template>
  <div class="basic">
    <div class="header">
      <el-steps style="max-width: 100%; background: #fff" :active="active" simple>
        <el-step title="基本情况" />
        <el-step title="项目成员&指导老师" />
        <el-step title="立项依据" />
        <el-step title="经费预算" />
      </el-steps>
    </div>
    <div class="dashedline"></div>
    <transition name="slide-fade" mode="out-in">
      <!-- <router-view v-loading="loading"></router-view> -->
      <router-view></router-view>
    </transition>
    <div class="bottom1">
      <el-button
        size="large"
        style="height: 50px; width: 100px"
        type="danger"
        @click="$router.go(-1)"
        >返回</el-button
      >
      <el-button size="large" style="height: 50px; width: 100px" type="primary" @click="next"
        >下一步</el-button
      >
    </div>
    <!-- <el-button style="margin-top: 12px" @click="next">Next step</el-button> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// const route = useRoute()

const active = ref(0)
const loading = ref(false)
const next = async () => {
  if (active.value++ >= 3) {
    router.push('/student/content')
  }
  if (active.value === 0) {
    router.push('basic')
  } else if (active.value === 1) {
    router.push('personnel')
  } else if (active.value === 2) {
    router.push('project')
  } else if (active.value === 3) {
    router.push('budget')
  }
  loading.value = true
  await setTimeout(() => {
    loading.value = false
  }, 200)
  window.scrollTo({
    top: 0
    // behavior: 'smooth' // 平滑滚动
  })
}
// const back = () => {
//   if (active.value-- <= 0) {
//     router.push('content/')
//   }
//   if (active.value === 0) {
//     router.push('basic')
//   } else if (active.value === 1) {
//     router.push('personnel')
//   } else if (active.value === 2) {
//     router.push('project')
//   } else if (active.value === 3) {
//     router.push('budget')
//   }
//   window.scrollTo({
//     top: 0,
//     behavior: 'smooth' // 平滑滚动
//   })
// }
</script>

<style lang="less" scoped>
.basic {
  width: 1350px;
  // height: 500px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 40px;
  // transition: all 0.5s;
  .header {
    margin: 0 20px 20px;
    padding-top: 40px;
  }

  .dashedline {
    width: 100%;
    height: 1px;
    border: 0.5px dashed #ccc;
    margin-bottom: 20px;
  }

  .bottom1 {
    margin: 20px 100px;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
